import { defineStore } from 'pinia'
import { FormSchema } from '@/components/Form'
import { reactive } from 'vue'
export interface SelectedItem {
  id: string
  title: string
}

// 定义一个函数来创建store的ID
function createTagsWithInputStoreId(id) {
  return `tagsWithInput-${id}`
}

export const tagsWithInputStore = (id) =>
  defineStore(createTagsWithInputStoreId(id), {
    state: () => ({
      isTagsDialogVisible: false,
      schema: reactive<FormSchema[]>,
      tagsList: reactive<string[]>([]) // 一个响应式数组，存储标签列表
    }),
    actions: {
      openDialog() {
        this.isTagsDialogVisible = true
      },
      closeDialog() {
        this.isTagsDialogVisible = false
      },
      setSchema(newSchema) {
        this.schema = newSchema
      },
      removeTag(tag) {
        const index = this.tagsList.indexOf(tag)
        if (index !== -1) {
          this.tagsList.splice(index, 1) // 删除这个元素
        }
      },
      reset() {
        this.$reset()
      }
    }
  })()

export type TagsWithInputStoreType = ReturnType<typeof tagsWithInputStore>
